<!--
 * @Author: zhw
 * @Date: 2025-08-12 22:26:51
 * @LastEditTime: 2025-08-14 01:49:33
 * @LastEditors: zhw 443844039@qq.com
 * @Description: 科研管理
-->
<template>
  <div class="pageList">
    <div class="card-container">
      <el-card class="custom-card" v-for="(item,index) in cardList" :key="index">
        <div class="card-content">
          <img :src="item.imgUrl" alt="内容" class="card-icon">
          <div class="card-title">{{ item.title }}</div>
          <div class="card-count">{{ item.count }} 
            <span class="card-unit">篇</span>
          </div>
        </div>
      </el-card>
    </div>
    <TheTable
      ref="TheTableRef"
      :tableApi="teachingResearchListApi"
      :searchList="searchList"
      :searchQuery="mustQuery"
			:listColumns="listColumns[listColumnsIndex]"
			:actionArr="actionArr"
			:btnList="btnList"
      :mustQuery="mustQuery"
      exportUrl='/jsjx/teachingResearch/export'
      exportName="教研管理"
			@handleClick="handleClick"
      @handleSelectChange="handleSelectChange"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    />
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <div class="border-bg">
          <img src="@/assets/teachingTenet/u2256.png" alt="收藏内容1" width="12px" height="12px">
          <div style="margin-left: 10px;">请选择需要新增的数据类型</div>
        </div>
        <div class="radio-content">
          <div style="margin-right: 20px;"><span style="color: red;">*</span>类型：</div>
          <el-radio v-model="radioValue" v-for="(item,index) in research_type" :key="index" :label="item.dictCode">{{ item.dictLabel }}</el-radio>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import TheTable from '@/componentsView/TheTable.vue';
import { searchList, listColumns, actionArr, btnList} from './data'
import { teachingResearchListApi, teachingResearchDelApi, queryCountByResearchTypeApi, teachingResearchEditApi } from '@/api/teachingResearchReform/teachingResearch'
import { useDict } from '@/utils/dict/useDict'
import img1 from '@/assets/teachingResearch/u3421.png'
import img2 from '@/assets/teachingResearch/u3422.png'
import img3 from '@/assets/teachingResearch/u3437.png'
import img4 from '@/assets/teachingResearch/u3423.png'
export default {
  name: 'TeachingResearchList',
  components: { TheTable },
  data() {
    return {
      radioValue:'',
      teachingResearchListApi,
      teachingResearchDelApi,
      searchList,
      listColumns,
      actionArr,
      btnList,
      dialogVisible: false,
      research_type: useDict('research_type'),
      mustQuery:{
        researchTypeId: 83
      },
      listColumnsIndex: 0,
      cardList: [
        {
          title: '项目研发',
          imgUrl: img1,
          count : 0,
        },{
          title: '论文发表',
          imgUrl: img2,
          count : 0,
        },{
          title: '技能大赛',
          imgUrl: img3,
          count : 0,
        },{
          title: '课题研究',
          imgUrl: img4,
          count : 0,
        },
      ],
      researchStatus:{
        [83]:[
          {
            label:'立项中',
            value: 96,
          },
          {
            label:'研究中',
            value: 97,
          },
          {
            label:'结题待验收',
            value: 98,
          },
          {
            label:'已结题',
            value: 99,
          }
        ],
        [84]:[
          {
            label:'待审核',
            value: 100,
          },
          {
            label:'已发表',
            value: 101,
          },
          {
            label:'待归档',
            value: 102,
          }
        ],
        [85]:[
          {
            label:'待审核',
            value: 100,
          },
          {
            label:'已通过',
            value: 103,
          },
          {
            label:'参赛中',
            value: 104,
          },
          {
            label:'已完结',
            value: 105,
          }
        ],
        [86]:[
          {
            label:'申报中',
            value: 106,
          },
          {
            label:'立项中',
            value: 107,
          },
          {
            label:'研究中',
            value: 108,
          },
          {
            label:'结题中',
            value: 109,
          },
          {
            label:'已结题',
            value: 211,
          }
        ]
      },
      selectValue: '',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    setTableList(){
      this.$refs.TheTableRef.resetQuery()
    },
    handleAdd(){
      if (!this.radioValue) return this.$message.error('请选择类型');
      let path = '/teachingResearchReform/teachingResearch/detail?action=add' + '&researchTypeId=' + this.radioValue
      this.$router.push(path);
    },
    handleSelectChange(val) {
      this.selectValue = val;
    },
    handleSearch(val) {
      this.research_type.forEach((item, index) => {
        if (item.dictCode === this.selectValue) {
          this.listColumnsIndex = index;
        }
      });
    },
    handleReset(){
      this.mustQuery={
        researchTypeId: 83
      }
    },
    getData() {
      queryCountByResearchTypeApi().then(res => {
        if (res.code === 200) {
          const countMap = {};
          res.data.forEach(item => {
            countMap[item.research_type_name] = item.count;
          });
          
          this.cardList = this.cardList.map(item => ({
            ...item,
            count: countMap[item.title] || 0
          }));
        }
      }).catch(error => {
        console.error('获取数据失败:', error);
        this.$message.error('获取统计数据失败');
      });
    },
    handleClick({record,action}){
      let path = '';
      switch(action) {
        case 'add':
          this.dialogVisible = true;
          break;
        case 'look':
        case 'edit':
          path = '/teachingResearchReform/teachingResearch/detail?researchId=' + record.researchId + '&action='+ action + '&researchTypeId=' + record.researchTypeId;
          this.$router.push(path);
          break;
        case 'del':
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delFun(record.researchId);
          }).catch(() => {
            this.$message.info('已取消删除');
          });
          break;
        case 'process':
          this.$confirm('此操作将更改项目状态, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.processFun(record)
          }).catch(() => {
            this.$message.info('已取消办理');
          });
          break;
        default:
          break;
      }
    },
    processFun(row) {
      const researchTypeId = row.researchTypeId;
      const statusList = this.researchStatus[researchTypeId];
      if (!statusList) {
        this.$message.error('无效的项目类型');
        return;
      }
      
      const currentStatus = row.researchStatusId;
      const currentIndex = statusList.findIndex(item => item.value === currentStatus);
      if (currentIndex === -1) {
        this.$message.error('当前状态无效');
        return;
      }
      
      const nextStatusIndex = currentIndex + 1;
      if (nextStatusIndex >= statusList.length) {
        this.$message.error('已是最终状态');
        return;
      }
      
      const nextStatus = statusList[nextStatusIndex].value;
      
      teachingResearchEditApi({ 
        researchId: row.researchId,
        researchStatusId: nextStatus 
      }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.setTableList();
        } else {
          this.$message.error(res.msg || '操作失败');
        }
      }).catch(error => {
        this.$message.error('请求失败: ' + error.message);
      });
    },
    
   async delFun(planId) {
    try {
      const res = await teachingResearchDelApi(planId);
        if (res.code === 200) {
          this.$message.success(res.msg);
          this.mustQuery.researchTypeId = this.selectValue;
        } else {
          this.$message.error(res.msg);
        }
      } catch (error) {
        this.$message.error('删除失败: ' + error.message);
      }
    },
    handleClose(){},
  },
}
</script>
<style scoped lang="scss">
// 卡片容器样式
.card-container {
  display: flex;
  justify-content: space-between;
  gap: 16px; // 卡片之间的间距
  padding: 16px; // 容器内边距
  flex-wrap: wrap; // 支持响应式换行
}

// 自定义卡片样式
.custom-card {
  flex: 1; // 卡片平均分配宽度
  min-width: 200px; // 最小宽度，保证响应式效果
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); // 轻微阴影增加层次感
  border-radius: 8px; // 圆角优化
  transition: all 0.3s ease; // 过渡动画

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); // hover效果
  }
}

// 卡片内容布局
.card-content {
  display: flex;
  align-items: center;
  gap: 12px; // 内部元素间距
}

// 卡片图标样式
.card-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0; // 防止图标被压缩
}

// 标题样式
.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #5C5C5C; // 主文本色
  flex: 1; // 标题占剩余空间
}

// 数量样式
.card-count {
  font-size: 24px;
  font-weight: 700;
  color: #333333; // 突出显示数量
}

// 单位样式
.card-unit {
  font-size: 14px;
  font-weight: 400;
  color: #606266; // 次要文本色
}

.border-bg{
  display: flex;
  align-items: center;
  border: 1px solid #91D5FF;
  border-radius: 4px;
  background-color: #E6F7FF;
  height: 32px;
  padding: 0% 10px;
  margin-bottom: 20px;
}
.radio-content{
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog{
  margin-top: 30vh !important;
}
</style>